<template>
  <div class="vir-login-page">
    <div class="vir-login-container">
      <div class="vir-login-header">AdminVir Login</div>
      <el-form class="vir-login-form" :model="form" ref="form" :rules="formRule" label-width="55px">
        <el-form-item label="账户" prop="username">
          <el-input v-model="form.username" placeholder="请输入登录账户"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入登录密码" type="password"></el-input>
        </el-form-item>
        <el-form-item class="vir-login-form-btn">
          <el-button type="primary" @click="doSubmit">登陆</el-button>
        </el-form-item>
        <el-form-item class="vir-login-form-more">
          <router-link to="/forgetpwd">忘记密码</router-link>
          <span style="padding: 0px 8px;">OR</span>
          <router-link to="/register">注册用户</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { session } from '@/plugins/storage';

@Component
export default class LoginPage extends Vue {
  private form: any = {
    username: 'admin',
    password: '123456'
  };

  private formRule: any = {
    username: [{
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }, {
      pattern: /[\w@\.]{2,16}/,
      message: '账户不合法'
    }],
    password: [{
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }, {
      pattern: /[\w\!\@\#\$\%\&\*]{6,32}/,
      message: '密码不合法'
    }],
  };

  get formElem(): any {
    return this.$refs.form;
  }

  private created(): void {
    if (this.$user.login) {
      this.$router.replace({
        path: session.getStr('route-to-path'),
        query: session.getObj('route-to-query'),
        params: session.getObj('route-to-params')
      });
    }
  }

  private doSubmit(): void {
    this.formElem.validate((valid: boolean) => {
      if (!valid) return false;

      this.$$loading.open('正在登录...');
      // 执行登陆

      this.$http.doPost('/api/login.json', this.form).then((res: any) => {
        this.$message.success('欢迎您：' + res.data.name);

        // 存储登陆信息
        this.$user.account = res.data.account;
        this.$user.name = res.data.name;
        this.$user.role = res.data.role;
        this.$user.icon = res.data.icon;
        this.$user.token = res.token;
        this.$user.refresh();

        // 重定向到原页面
        this.$router.replace({
          path: session.getStr('route-to-path'),
          query: session.getObj('route-to-query'),
          params: session.getObj('route-to-params')
        });
      }).finally(() => {
        this.$$loading.close();
      });
    });
  }
}
</script>
<style lang="scss" scoped>
.vir-login-page {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: gainsboro;

  .vir-login-header {
    font-size: 24px;
    line-height: 2em;
    text-align: center;
    margin-bottom: 15px;
  }
  .vir-login-form {
    width: 300px;
    padding: 25px 15px;
    background: #fff;

    .vir-login-form-btn {
      margin-bottom: 0px;
      .el-button {
        width: 100%;
      }
    }
    /deep/ .vir-login-form-more > div {
      text-align: center;
    }
  }
}
</style>

